{include file="common/header"}
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form top-search-from" action="">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">视频标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="video_title" placeholder="" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">视频等级</label>
                        <div class="layui-input-block">
                            <select name="level_id" lay-search>
                                <option value="">选择视频等级</option>
                                {foreach $levelList as $k=>$v}
                                <option value="{$v.level_id}">{$v.level_title}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="query">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                    <div class="toggle-btn">
                        <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
                        <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="dict-table" lay-filter="dict-table"></table>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/html" id="dict-brand-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>

<script type="text/html" id="dict-province-bar">
    <button class="pear-btn pear-btn-primary pear-btn-xs" lay-event="edit">
        <i class="layui-icon">编辑</i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-xs" lay-event="remove">
        <i class="layui-icon">删除</i>
    </button>
</script>

<script type="text/html" id="recommend">
    <input type="checkbox" name="is_recommend" value="{{d.video_id}}" lay-skin="switch" lay-text="是|否"
           lay-filter="brandRecommend"
           {{# if(d.is_recommend==1){ }} checked {{# } }}>
</script>

<script type="text/html" id="status">
    <input type="checkbox" name="video_status" value="{{d.video_id}}" lay-skin="switch" lay-text="启用|禁用"
           lay-filter="brandStatus"
           {{# if(d.video_status==1){ }} checked {{# } }}>
</script>
{include file="common/footer"}
<script>
    layui.use(['table', 'form', 'jquery', 'common', 'dropdown'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;

        let MODULE_PATH = "{$Request.root}/video/";

        table.render({
            elem: '#dict-table',
            url: MODULE_PATH + 'index',
            cols: [
                [
                    {title: 'ID', field: 'video_id', align: 'center', width: 60},
                    {title: '视频标题', field: 'video_title', align: 'center'},
                    {title: '视频等级', field: 'level_title', align: 'center'},
                    {title: '训练类型', field: 'category_title', align: 'center'},
                    {
                        title: '缩略图', field: 'video_thumb', align: 'center', templet: function (d) {
                            return '<img class="photo" lay-event="photo" src=" ' + d.video_thumb + '">';
                        }
                    },
                    {
                        title: '视频内容', field: 'video_url', align: 'center', templet: function (d) {
                            return '<a style="color: #1E9FFF;cursor: pointer;" target="_blank" href="' + d.video_url + '">点击查看</a>'
                        }
                    },
                    {title: '是否推荐', field: 'is_recommend', align: 'center', templet: '#recommend'},
                    {title: '视频状态', field: 'video_status', align: 'center', templet: '#status'},
                    {title: '浏览次数', field: 'video_views', align: 'center', hide: true},
                    {title: '创建时间', field: 'create_time', align: 'center'},
                    {title: '操作', toolbar: '#dict-province-bar', align: 'center', width: 135}
                ]
            ],
            cellMinWidth: 100,
            skin: 'grid',
            even: 'true',
            size: 'lg',
            page: true,
            toolbar: '#dict-brand-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter']
        });

        form.on('submit(query)', function (data) {
            table.reload('dict-table', {
                where: data.field,
                page: {curr: 1}
            })
            return false;
        });

        table.on('tool(dict-table)', function (obj) {
            if (obj.event === 'edit') {
                window.edit(obj.data['video_id']);
            } else if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'photo') {
                window.photo(obj.data['video_thumb']);
            }
        });
        table.on('toolbar(dict-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        window.photo = function (url) {
            if (!url || url == "") {
                layer.msg("图片地址错误！");
                return;
            }
            var auto_img = {};
            var img = new Image();
            img.src = url;
            img.onload = function () {
                var max_height = $(window).height() - 100;
                var max_width = $(window).width();
                var rate1 = max_height / img.height;
                var rate2 = max_width / img.width;
                var rate3 = 1;
                var rate = Math.min(rate1, rate2, rate3);
                auto_img.height = img.height * rate;
                auto_img.width = img.width * rate;
                layer.open({
                    type: 1,
                    title: false,
                    area: ['auto'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: "<img src='" + url + "' width='" + auto_img.width + "px' height='" + auto_img.height + "px'>"
                })
            }
        };

        window.edit = function (id) {
            layer.open({
                type: 2,
                title: '编辑视频',
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                shade: 0.1,
                shadeClose: true,
                area: common.screenSide(),
                content: MODULE_PATH + 'edit/id/' + id
            });
        }

        window.add = function () {
            layer.open({
                type: 2,
                title: '添加视频',
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                shade: 0.1,
                shadeClose: true,
                area: common.screenSide(),
                content: MODULE_PATH + 'add'
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该数据', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + 'goRemove',
                    data: {id: obj.data['video_id']},
                    dataType: 'json',
                    type: 'POST',
                    success: function (res) {
                        layer.close(loading);
                        if (res.code == 200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }
        window.refresh = function () {
            table.reload('dict-table');
        }

        form.on('switch(brandStatus)', function (data) {
            var status = data.elem.checked ? 1 : 0;
            var id = this.value;
            var load = layer.load();
            $.post('goStatus', {status: status, id: id}, function (res) {
                layer.close(load);
                //判断有没有权限
                if (res && res.code == 999) {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 1500,
                    }, function () {
                        window.refresh();
                    })
                    return false;
                } else if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1, time: 1500})
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                        $(data.elem).prop('checked', !$(data.elem).prop('checked'));
                        form.render()
                    })
                }
            })
        });

        form.on('switch(brandRecommend)', function (data) {
            var status = data.elem.checked ? 1 : 0;
            var id = this.value;
            var load = layer.load();
            $.post('goRecommend', {status: status, id: id}, function (res) {
                layer.close(load);
                //判断有没有权限
                if (res && res.code == 999) {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 1500,
                    }, function () {
                        window.refresh();
                    })
                    return false;
                } else if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1, time: 1500})
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                        $(data.elem).prop('checked', !$(data.elem).prop('checked'));
                        form.render()
                    })
                }
            })
        });
    })
</script>
</html>
